﻿@model Lead2012.ViewModels.LeadImportViewModel
 
 <fieldset id="ImportLeadSecondStep" data-bind="visible:DisplaySecondView">
 
    <div class="content">
        <h2 class="app">
            <strong>Nhập các khách hàng</strong>
        </h2>
        <nav id="steps" class="steps steps-wide steps-blue">
                  <ul>
                    <li class="first done" style="z-index: 3;"><a href="javascript:void(0)"><span>Bước 1: Chọn tài liệu</span></a></li>
                    <li class="active" style="z-index: 2;"><a href="javascript:void(0)"><span>Bước 2: Map các tên cột</span></a></li>
                    <li class="last" style="z-index: 1;"><a href="javascript:void(0)"><span>Bước 3: Xem và nhập khách hàng</span></a></li>
                  </ul>
                </nav>
        <div class="title nomargin">
            <h3>Bước 2: Map các tên cột</h3>
        </div>
        <div class="panel">
            <p>
                <strong>Chúng tôi có thử map tên cột trong tài liệu của bạn đến các tên cột chuẩn của chúng tôi.</strong></p>
            <ul class="circle-number">
                <li><span class="n">1</span>Kiểm tra tên tiêu đề để chắc rằng chúng là chính xác.
                    Bạn có thể loại bỏ các các cột từ tài liệu của bạn bởi việc chọn biểu tượng <strong>Xóa</strong>.</li>
                <li><span class="n">2</span>
                    Trong một vài trường hợp chúng tôi không tự động map các cột, như vậy xin hãy tìm tên các 
                    cột bên phải để map lại với tên của bạn bên trái.
                </li>
            </ul>
            <div class="title nomargin">
                <h3>Map tên cột</h3>
            </div>
            <div class="toolbar">
                <div class="area full">
                    <span class="progress-info">
                        <strong data-bind="text:TotalMatchedHeaders"></strong> ngoài của <strong data-bind="text:TotalHeaders"></strong> 
                        <span data-bind="text:HeaderText"></span>
                    </span>
                    <span class="progress-bar" style="width:60%;">
                        <span class="pb-current" data-bind="style:{width: ProgressValue}"></span>
                    </span>
                </div>
            </div>
            <div class="match-header">
                <div id="matchleftside" class="mh-left" data-bind="itemDrop:{}">
                    <div class="f-view">
                        <strong style="padding-right:5px;">Xem</strong>                        
                        <input type="radio" name="radioViewType" value="All" onclick="ChangeViewType('All');"  checked/>
                        <label>Tất cả</label>                        
                        <input type="radio" name="radioViewType" value="Unmatched" onclick="ChangeViewType('Unmatched');" />
                        <label>Duy nhất không map</label>                        
                    </div>
                    <div class="mh-headers">
                        <span class="mh-hdr hdr1">Các cột của bạn</span> <span class="mh-hdr hdr2">Các cột đã map</span>
                    </div>
                    <ul class="mh-yhdrs-list" id='leftPanel' data-bind="foreach: DisplayedColumns">
                        <li data-bind='css: {"active": IsActive}, attr:{id:ColumnName}'>
                            <a href="javascript:void(0)" class="btn btn-x-light info" title="Do not import this column" data-bind="click: $parent.x_OutColumn.bind($data)">X</a>
                            <span class="lb" data-bind="text:ColumnName"></span>                         
                            <span data-bind="with: MappedField, attr:{'class': (MappedField != null)? 'i-matched':'i-unmatched'},itemDragBack:{},visible: (MappedField != null)? true:false">
                              <span data-bind="text: FieldName,attr:{title: FieldName}"> </span>
                            </span>

                            <span data-bind="with: MappedField, attr:{'class': (MappedField != null)? 'i-matched':'i-unmatched'},visible: (MappedField != null)?false:true">
                                <span data-bind="text: FieldName,attr:{title: FieldName}"> </span>
                            </span>
                        </li>
                    </ul>
                </div>

                <div id="matchrightside" class="mh-right" data-bind="itemDropBack:{}">
                    <div class="f-search">                        
                        <input id="searchKeywordstep2" type="text" class="text" data-bind="enable:EnableSearch, value:SearchFieldText, event:{ keypress: EnterHandler }" />
                        <a href="javascript:void(0)" id="btngo" class="btn btn-go" data-bind="click: SearchFields">GO</a>
                        <a href="javascript:void(0)" id="btn_view_allunmatched" class="btn btn-view-unmatched right" data-bind="click: ViewAllFields">View All</a>
                    </div>                      
                    <div class="mh-headers">
                        <span class="mh-hdr hdr1">Các cột hệ thống</span>
                    </div>
                    <ul class="mh-360hdrs-list" data-bind="foreach:DisplayedGroups">
                        <li>
                            <h3 data-bind="text:Title"></h3>                            
                            <span class="items-container" data-bind="visible: Sections!=null && Sections.length>0, foreach:Sections">
                                <h3 data-bind="text:Title"></h3>
                                <span class="item-group" data-bind="visible: Fields!=null && Fields.length>0, attr:{'class': (ko.utils.arrayIndexOf($parent.Sections, $data) == $parent.Sections.length-1)? 'item-group last':'item-group'}, foreach:Fields" >
                                    <span class="i-matched1" data-bind="itemDrag:{}">
                                        <span class="FieldName" data-bind="text:FieldName,attr:{title: FieldName}" >
                                        </span>
                                        <input type="hidden" class ="IdField" data-bind="value:FieldId"/>
                                    </span>
                                </span>
                            </span>

                            <span class="item-group" data-bind="visible: Fields!=null && Fields.length>0, attr:{'class': (ko.utils.arrayIndexOf($parent.DisplayedGroups, $data) == $parent.DisplayedGroups.length-1)? 'item-group last':'item-group'}, foreach:Fields">
                                <span class="i-matched1" data-bind="itemDrag:{}">
                                    <span class="FieldName" data-bind="text:FieldName,attr:{title: FieldName}">
                                    </span>
                                    <input type="hidden" class ="IdField" data-bind="value:FieldId"/>
                                </span>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <h3 class="centered-wbtn centered-wbtn-bottom save">
            <a class="btn btn-back-light left" href="javascript:void(0)" data-bind="click:GoBackHelp">Back</a> 
            <a class="btn btn-next-gray right" id="NextToStep3" data-bind="click:GoToDataCorrection" href="javascript:void(0)">Next</a>
            <div class="clear"></div>
        </h3>

    </div>
    @Html.Partial("Fancybox_Init_Review")
 </fieldset>
